<!--角色管理-->
<template>
    <div class="roleManagement">
        <tyTable :searchFlag="false"
                 :listApi="$api.queryRolePage"
                 :deleteApi="$api.deleteRole"
                 :afterList="afterList"
                 :openDrawer="openDrawer"
                 ref="tyTable">
            <template v-slot:search="{ param}">
            </template>
            <!--            按钮-->
            <template v-slot:search-operation>
                <div class="header-box">
                    <el-form-item style="float: right">
                        <el-button icon="el-icon-plus" type="primary"
                                   @click="openDrawer()">新增角色
                        </el-button>
                    </el-form-item>
                </div>
            </template>
            <template v-slot:table>
                <el-table-column
                    type="index"
                    label="序号"
                    width="52"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="角色名"
                >
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="描述"
                >
                </el-table-column>

                <el-table-column
                    prop="sort"
                    label="排序"
                    width="100"
                >
                </el-table-column>

            </template>
        </tyTable>
        <!-- 新增查看编辑表格 -->
        <tyAddUpdate :model="formData"
                     :add-api="$api.addRole"
                     :update-api="$api.updateRole"
                     ref="tyAddUpdate"
                     :success-call="refreshData"
                     :dialogSize="'50%'"
        >

            <el-form label-position="left" ref="form-ref" label-width="120px" :model="formData" :rules="rules">
                <!--                {{formData}}-->
                <el-form-item label="角色名:" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入角色名" clearable maxlength="300"></el-input>
                </el-form-item>

                <el-form-item label="角色描述:" prop="remark">
                    <el-input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入角色描述" clearable
                              maxlength="600"></el-input>
                </el-form-item>

                <el-form-item label="配置用户:" prop="remark">
                    <deptUser v-if="drawerFlag" v-model="userIdList" :updateValue="updateValue"></deptUser>
                </el-form-item>
                <el-form-item label="菜单权限">
                    <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠
                    </el-checkbox>
                    <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选
                    </el-checkbox>
                    <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">
                        父子联动
                    </el-checkbox>

                    <el-tree
                        class="tree-border"
                        :data="menuOptions"
                        show-checkbox
                        ref="treeMenu"
                        node-key="id"
                        :check-strictly="!form.menuCheckStrictly"
                        empty-text="加载中，请稍候"
                        :props="defaultProps"
                        @check="checkMenu"
                    ></el-tree>
                </el-form-item>
                <el-form-item label="排序:" prop="sort">
                    <el-input-number v-model="formData.sort" :min="1" :max="999999"></el-input-number>
                </el-form-item>

            </el-form>
        </tyAddUpdate>

    </div>
</template>

<script>
import deptUser from "@components/deptUser.vue";
import {tyAddUpdateMixins, tyConfirmMixins} from '@/mixins/addEditFormMixins'
import '@/style/ruoyi.scss' // ruoyi css
export default {
    name: 'roleManagement',
    components: {deptUser},
    mixins: [tyAddUpdateMixins, tyConfirmMixins],
    data() {
        return {
            // 基础
            formData: {
                id: null,
                sort: 1,
                remark: null,
                name: null,
                userIdListJson: null,
                menuIdListJson: "",
                userIdList: [],
                postRange: 1
            },
            userIdList: [],
            rules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                ],
                sort: [
                    {required: true, message: '请输入排序', trigger: 'blur'}
                ],
            },
            //     其它
            menuRoleId: null,
            // 表单参数
            form: {
                menuCheckStrictly: true
            },
            defaultProps: {
                children: "children",
                label: "label"
            },
            menuOptions: [],
            deptOptions: [],
            menuExpand: false,
            menuNodeAll: false,
        }
    },
    mounted() {
    },
    methods: {
        // 组件事件
        afterList(list) {
            list.forEach(item => {
                // if (item.userIdListJson != null) {
                //     item.userIdList = JSON.parse(item.userIdListJson)
                // } else {
                //     item.userIdList = []
                // }
                item.menuIdListJson = ""
            })
        },
        checkMenu(obj, item) {
            let checkedKeys = item.checkedKeys
            if (item.halfCheckedKeys.length > 0) {
                checkedKeys.push(...item.halfCheckedKeys)
            }
            this.formData.menuIdListJson = JSON.stringify(checkedKeys)
        },
        closeDialogPage() {
            this.drawerFlag = false
        },
        refreshData() {
            this.$store.dispatch('login/getRouter')
            this.$refs.tyTable.refreshData()
        },
        //
        updateValue(value) {
            this.formData.userIdList = value
            this.formData.userIdListJson = JSON.stringify(value)
            this.userIdList = value
        },
        // 树权限（展开/折叠）
        handleCheckedTreeExpand(value, type) {
            if (type == 'menu') {
                let treeList = this.menuOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.treeMenu.store.nodesMap[treeList[i].id].expanded = value;
                }
            } else if (type == 'dept') {
                let treeList = this.deptOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.treeMenu.store.nodesMap[treeList[i].id].expanded = value;
                }
            }
        },
        // 树权限（全选/全不选）
        handleCheckedTreeNodeAll(value, type) {
            if (type == 'menu') {
                this.$refs.treeMenu.setCheckedNodes(value ? this.menuOptions : []);
            } else if (type == 'dept') {
                this.$refs.treeMenu.setCheckedNodes(value ? this.deptOptions : []);
            }
        },
        // 树权限（父子联动）
        handleCheckedTreeConnect(value, type) {
            if (type == 'menu') {
                this.form.menuCheckStrictly = value ? true : false;
            } else if (type == 'dept') {
                this.form.deptCheckStrictly = value ? true : false;
            }
        },
        /** 查询菜单树结构 */
        getMenuTreeSelect() {
            this.$api.roleMenuTreeSelect().then(response => {
                this.menuOptions = response.menus;
            });
        },
    },
    created() {
        this.getMenuTreeSelect()
    },
    watch: {
        drawerFlag(newVal, oldVal) {
            this.userIdList = []
            if (newVal && this.formData.id != null) {
                this.$api.getRoleInfo(this.formData).then(res => {
                    this.formData.menuIdListJson = res.menuIdListJson
                    let list = JSON.parse(res.menuIdListJson)
                    this.formData.userIdList = JSON.parse(res.userIdListJson)
                    this.userIdList = this.formData.userIdList
                    this.$refs.treeMenu.setCheckedKeys(list)
                    let getCheckedKeys = [...this.$refs.treeMenu.getCheckedKeys()]
                    this.$nextTick(() => {
                        for (let key of getCheckedKeys) {
                            if (!list.includes(key)) {
                                this.$refs.treeMenu.setChecked(key, false)
                            }
                        }
                    })
                })
            } else {
                this.$nextTick(() => {
                    this.$refs.treeMenu.setCheckedKeys([])
                })
            }

        }
    }
}
</script>

<style scoped lang="scss">
.roleManagement {

    ::v-deep .el-table__cell {
        text-align: center;
    }

    .header-box {
        display: flex;

        margin-bottom: 10px;
    }

    .el-pagination {
        height: 28px;
    }
}


</style>
